<template>
  <div class="search">
    <el-form :inline="true" :model="filterData">
      <template v-for="(item,index) in _config.filter(e => e.type != 'button')">
        <el-form-item :label="item.name ? (item.name + '：') : ''" :key="index" v-show="!item.hide">
          <template v-if="item.type === 'input'">
            <el-input
              v-model="filterData[item.code]"
              :placeholder="item.placeholder||'请输入'"
              :style="{width: item.width + 'px'}"
              v-bind="item.props"
              size="small"
            ></el-input>
          </template>
          <template v-if="item.type === 'select'">
            <el-select
              v-model="filterData[item.code]"
              :placeholder="item.placeholder"
              :style="{width: item.width + 'px'}"
              size="small"
              filterable
              :clearable="item.filter"
              :multiple="item.multiple"
              collapse-tags
            >
              <el-option label="全部" :value="null" v-if="!item.multiple"></el-option>
              <el-option
                v-for="(sub,subidx) in item.options"
                :key="subidx"
                :label="item.labelName ? sub[item.labelName] : sub.label"
                :value="item.valueName ? sub[item.valueName] : sub.value"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.type === 'daterange'">
            <el-date-picker
              v-model="filterData[item.code]"
              type="daterange"
              align="right"
              size="small"
              :format="item.valueFormat || 'yyyy-MM-dd'"
              :value-format="item.valueFormat || 'yyyy-MM-dd'"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="item.pickerOption ? item.pickerOption : ''"
            ></el-date-picker>
          </template>
          <template v-if="item.type === 'datetimerange'">
            <el-date-picker
                v-model="filterData[item.code]"
                type="datetimerange"
                align="right"
                size="small"
                :format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="item.pickerOption ? item.pickerOption : ''"
            ></el-date-picker>
          </template>
          <template v-if="item.type === 'date'">
            <el-date-picker
              v-model="filterData[item.code]"
              type="date"
              size="small"
              :value-format="item.valueFormat || 'yyyy-MM-dd'"
              placeholder="选择日期"
            ></el-date-picker>
          </template>
        </el-form-item>
      </template>
      <div class="buttons">
        <template v-for="(item,index) in _config.filter(e => e.type == 'button')">
          <el-form-item :label="item.name ? (item.name + '：') : ''" :key="index" v-show="!item.hide" :style="{float: item.buttonFloat}">
            <template v-if="item.type === 'button'">
              <template v-if="item.auth">
                <el-button
                  :icon="item.icon"
                  type="primary"
                  @click="item.fun"
                  size="small"
                  v-Auth="item.auth"
                >{{ item.text }}</el-button>
              </template>
              <template v-else>
                <el-button
                  :icon="item.icon"
                  :type="item.buttonType"
                  @click="item.fun"
                  size="small"
                >{{ item.text }}</el-button>
              </template>

            </template>
          </el-form-item>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import { serachConfig } from '@/common/interface'
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class Search extends Vue {
    @Prop ({ default: [] }) config!: serachConfig[]
    @Prop ({ default: {} }) filterData!: any

    get _config () {
      const routeName = this.$route.name
      const btnPermissionObj = this.$store.getters.getBtnPermission
      const btnPermission = routeName ? btnPermissionObj[routeName] : []
      return this.config.filter((e) => {
        if(e.type !== 'button') return e
        return btnPermission.some(btn => btn.name === e.text)
      })
    }
}
</script>

<style lang="scss">
.search{
  .el-form{
    .el-form-item{
      margin-right: 20px;
      .el-form-item__label{
        padding-right: 0;
      }
    }
  }
}
</style>